Ext.define('Seq.svg.SelectBox', {
	        extend : 'Seq.svg.Base',

	        boxCls : {
		        box : {
			        fill : 'none',
			        stroke : '#939393',
			        'stroke-width' : 1,
			        'stroke-linecap' : 'round',
			        'stroke-linejoin' : 'round',
			        'stroke-dasharray' : "-"
		        },
		        subbox : {
			        fill : 'none',
			        stroke : '#24408f',
			        'stroke-width' : 1,
			        'stroke-linecap' : 'round',
			        'stroke-linejoin' : 'round',
			        'stroke-dasharray' : "-"
		        },
		        anchor : {
			        fill : '#ffffff',
			        stroke : '#939393',
			        'stroke-width' : 1,
			        'stroke-linecap' : 'round',
			        'stroke-linejoin' : 'round',
			        'stroke-dasharray' : "-"
		        }
	        },

	        selected : [], // 选中的model
	        grouper : null, // 多选时，将选中的model放在一个group中，增加拖动事件

	        box : null, // model的选中框
	        subBoxs : [], // 多选时的子选择框
	        anchors : [], // 选中框上的8个拖放点和中心旋转点

	        select : function(model, e) { // 选中单个model
		        var me = this, idx = me.indexOfModel(model, me.selected);
		        if (e.ctrlKey || e.shiftKey) {
			        if (-1 == idx) { // 选中
				        me.selected.push(model);
			        } else { // 已选中的移除
				        Ext.Array.removeAt(me.selected, idx);
			        }
		        } else {
			        if (-1 == idx) {
				        me.selected = []
				        me.selected.push(model);
			        }
		        }
		        me.drawBox();
	        },

	        selects : function(models, e) {
		        var me = this;

		        if (!(e.ctrlKey || e.shiftKey)) {
			        me.clear();
		        }
		        me.selected = me.selected.concat(models);
		        me.drawBox();
	        },

	        clear : function() {
		        var me = this;
		        me.clearBox();
		        me.selected = [];
	        },

	        cancel : function() {
		        this.clearBox();
	        },

	        clearBox : function() {
		        var me = this;

		        if (me.box) {
			        me.box.remove();
			        me.box = null;
		        }

		        for (var i = 0, len = me.subBoxs.length; i < len; i++) {
			        me.subBoxs[i].remove();
		        }
		        me.subBoxs = [];

		        for (var i = 0, len = me.anchors.length; i < len; i++) {
			        me.anchors[i].remove();
		        }
		        me.anchors = [];
	        },

	        drawBox : function() {
		        var me = this, paper = me.canvas.svg.paper;
		        me.clearBox();

		        var bbox = me.boxOfModels(me.selected);

		        if (bbox) {
			        // 外框
			        me.box = paper.rect(bbox.x, bbox.y, bbox.w, bbox.h).attr(me.boxCls.box);
			        me.drawAnchors(paper, bbox);
			        // 多选时，selected中的每个model绘制选中框
			        var len = bbox.boxs.length;
			        if (1 < len) {
				        var box;
				        for (var i = 0; i < len; i++) {
					        box = bbox.boxs[i];
					        box = paper.rect(box.x, box.y, box.w, box.h).attr(me.boxCls.subbox);
					        me.subBoxs.push(box);
				        }
			        }
		        }
	        },

	        /** ***** bbox计算函数 ***** */

	        boxOfModel : function(model) {
		        var bbox = this.getBBox(model);

		        if (0 == bbox.h) { // 横线
			        bbox.y -= 10;
		        }
		        if (0 == bbox.w) { // 竖线
			        bbox.x -= 10;
		        }
		        if (bbox.h < 20) { // 至少20像素高
			        bbox.h = 20;
			        bbox.cy = bbox.y + 10;
			        bbox.y2 = bbox.y + 20;
		        }
		        if (bbox.w < 20) { // 至少20像素宽
			        bbox.h = 20;
			        bbox.cx = bbox.x + 10;
			        bbox.x2 = bbox.x + 20;
		        }

		        bbox.x = Math.trunc(bbox.x) - 0.5;
		        bbox.y = Math.trunc(bbox.y) - 0.5;
		        bbox.x2 = Math.trunc(bbox.x2) + 0.5;
		        bbox.y2 = Math.trunc(bbox.y2) + 0.5;

		        return bbox;
	        },

	        unionBox : function(src, tar) {
		        if (!src) {
			        src = Ext.clone(tar);
			        src.boxs = [];
		        } else {
			        var path = Ext.String.format('M{0},{1}L{2},{3}', Math.min(src.x, tar.x), Math.min(src.y, tar.y),
			                Math.max(src.x2, tar.x2), Math.max(src.y2, tar.y2));
			        var boxs = src.boxs;
			        src = Snap.path.getBBox(path);
			        src.boxs = boxs;
		        }
		        src.boxs.push(tar);
		        return src;
	        },

	        boxOfModels : function(models) {
		        var me = this, bbox;
		        for (var i = 0, len = models.length; i < len; i++) {
			        var box = me.boxOfModel(models[i]);
			        bbox = me.unionBox(bbox, box);
		        }
		        return bbox;
	        },

	        indexOfModel : function(model, models) {
		        for (var i = 0, len = models.length; i < len; i++) {
			        if (models[i].id == model.id) {
				        return i;
			        }
		        }
		        return -1;
	        },

	        /** ***** 绘制8个拖放锚点和旋转中心点 ***** */

	        drawAnchor : function(paper, xy, cursor, idx) {
		        var me = this;
		        if (me.anchors[idx - 1]) {
			        var rect = me.anchors[idx - 1];
			        rect.attr('x', xy.x);
			        rect.attr('y', xy.y);
		        } else {
			        var rect = paper.rect(xy.x - 4, xy.y - 4, 8, 8).attr(me.boxCls.anchor).attr({
				                cursor : cursor
			                });
			        rect.attr('anchor', cursor);
			        me.anchors.push(rect);
		        }
	        },

	        drawCenter : function(paper, bbox) {
		        var me = this;
		        if (me.anchors[8]) {
			        var circle = me.anchors[8];
			        circle.attr('x', bbox.cx);
			        circle.attr('y', bbox.cy);
		        } else {
			        var circle = paper.circle(bbox.cx, bbox.cy, 4.5).attr(me.boxCls.anchor);
			        me.anchors.push(circle);
		        }
	        },

	        drawAnchors : function(paper, bbox) {
		        var me = this;
		        me.drawAnchor1(paper, bbox);
		        me.drawAnchor2(paper, bbox);
		        me.drawAnchor3(paper, bbox);
		        me.drawAnchor4(paper, bbox);
		        me.drawAnchor5(paper, bbox);
		        me.drawAnchor6(paper, bbox);
		        me.drawAnchor7(paper, bbox);
		        me.drawAnchor8(paper, bbox);
		        me.drawCenter(paper, bbox);
	        },

	        drawAnchor1 : function(paper, bbox) {
		        var xy = {
			        x : bbox.x,
			        y : bbox.y
		        };
		        this.drawAnchor(paper, xy, 'nw-resize', 1);
	        },

	        drawAnchor2 : function(paper, bbox) {
		        var xy = {
			        x : bbox.cx,
			        y : bbox.y
		        };
		        this.drawAnchor(paper, xy, 'n-resize', 2);
	        },

	        drawAnchor3 : function(paper, bbox) {
		        var xy = {
			        x : bbox.x2,
			        y : bbox.y
		        };
		        this.drawAnchor(paper, xy, 'ne-resize', 3);
	        },

	        drawAnchor4 : function(paper, bbox) {
		        var xy = {
			        x : bbox.x2,
			        y : bbox.cy
		        };
		        this.drawAnchor(paper, xy, 'e-resize', 4);
	        },

	        drawAnchor5 : function(paper, bbox) {
		        var xy = {
			        x : bbox.x2,
			        y : bbox.y2
		        };
		        this.drawAnchor(paper, xy, 'se-resize', 5);
	        },

	        drawAnchor6 : function(paper, bbox) {
		        var xy = {
			        x : bbox.cx,
			        y : bbox.y2
		        };
		        this.drawAnchor(paper, xy, 's-resize', 6);
	        },

	        drawAnchor7 : function(paper, bbox) {
		        var xy = {
			        x : bbox.x,
			        y : bbox.y2
		        };
		        this.drawAnchor(paper, xy, 'sw-resize', 7);
	        },

	        drawAnchor8 : function(paper, bbox) {
		        var xy = {
			        x : bbox.x,
			        y : bbox.cy
		        };
		        this.drawAnchor(paper, xy, 'w-resize', 8);
	        }

        })